<template>
  <div class="classify">
    <van-nav-bar fixed title="商品分类" />
    <van-search
      background="#fff"
      placeholder="请输入搜索关键词"
      shape="round"
      @click="$router.push('/search')"
    />
    <div class="content">
      <van-tree-select
        :active-id.sync="activeId"
        :items="items"
        :main-active-index.sync="activeIndex"
        @click-nav="click"
      >
        <template #content>
          <div
            v-for="(item, index) in items"
            v-show="index == findIndex"
            :key="index"
            class="con-box"
          >
            <div
              v-for="(item1, index1) in item.children"
              :key="index1"
              class="con-con"
            >
              <img
                :src="item1.image.external_url"
                style="width: 72px; height: 72px"
                @click="$router.push('/searchList')"
              />
              <p>{{ item1.name }}</p>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>
<script>
import { getCategoryData } from '@/api/category'

export default {
  name: 'classifyCom',
  components: {},
  data () {
    return {
      items: [],
      activeId: 1,
      activeIndex: 0,
      findIndex: 0
    }
  },
  computed: {},
  methods: {
    click (index) {
      this.findIndex = index
    },
    async getCategoryList () {
      const {
        data: {
          data: { list }
        }
      } = await getCategoryData()
      list.forEach((v) => {
        this.items.push({
          text: v.name,
          id: v.category_id,
          children: v.children
        })
      })
    }
  },
  created () {
    this.getCategoryList()
  }
}
</script>
<style lang="less" scoped>
.classify {
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

  .van-search {
    position: fixed;
    width: 100%;
    top: 46px;
    left: 0;

    .van-cell {
      padding-left: 100px;
    }
  }

  .content {
    padding-top: 100px;

    .van-tree-select {
      .van-tree-select__nav {
        padding-left: 5px;
        height: 70vh;
        text-align: center;
      }

      .van-tree-select__content {
        height: 100vh;
        padding: 30px 10px 10px 10px;

        .con-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .con-con {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
